<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可编辑的div</title>
</head>
<body>
<div id="myDiv" contenteditable="true">
    <p>
        <span style="color: red;">红色</span>
        <span style="color: blue;">蓝色</span>
    </p>
<!--    图片-->
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度" width="200" height="200">
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度" width="200" height="200">
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度" width="200" height="200">

</div>
<!--    插入图片-->
<input type="file" accept="image/*" onchange="insertImage(event)">

</body>
<script>
    function insertImage(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = '插入的图片';
                img.style.maxWidth = '50px';
                img.style.maxHeight = '50px';
                const div = document.getElementById('myDiv');
                div.appendChild(img);
            }
            reader.readAsDataURL(file);
        }
    }

</script>
</html>